<template>
  <!--跟进信息表单对话框-->
  <el-dialog center width="80%" :title="look?'查看':canEdit?'修改跟进信息':'新增跟进信息'" :visible.sync="followFormVisible"
             :before-close="closeVisitDialog" append-to-body
             @open="init"
  >
    <el-form style="margin: 0 auto" ref="followForm" :disabled="formDisabled" :model="visitForm" :rules="visitFormRules"
             size="mini"
    >
      <table class="mailTable" style="width: 90%">
        <tr class="firstTr">
          <td class="column firstTd title_td">
            <span class="required">*</span>沟通日期
          </td>
          <td class="column">
            <el-form-item prop="follow_time">
              <el-date-picker
                v-model="visitForm.follow_time"
                type="date"
                placeholder="选择日期"
                format="yyyy年MM月dd日"
                value-format="yyyy-MM-dd"
                style="width: 100%"
                :picker-options="pickerOptions"
              />
            </el-form-item>
          </td>
          <td class="column title_td">
            <span class="required">*</span>对接人
          </td>
          <td class="column">
            <el-form-item v-loading="contactSelectLoading" prop="opposite_person">
              <el-select
                v-model="visitForm.opposite_person"
                filterable
                placeholder="请输入对接人名称"
                style="width: 100%"
              >
                <el-option
                  v-for="item in opposite_person_arr"
                  :key="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="column firstTd title_td">
            联系方式
          </td>
          <td class="column" colspan="3">
            <el-input size="mini"
                      v-model.trim="visitForm.phone"
                      placeholder="请输入联系方式"
                      clearable
            />
          </td>
        </tr>
        <tr>
          <td class="column title_td firstTd">
            推进动作
          </td>
          <td class="column">
            <el-select v-model="visitForm.action_list" multiple
                       placeholder="请选择" style="width: 100%" size="mini"
            >
              <el-option
                v-for="item in advances_dict"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </td>
          <td class="column title_td">
            推荐资源
          </td>
          <td class="column">
            <el-select v-model="visitForm.resource_list" multiple
                       placeholder="请选择" style="width: 100%" size="mini"
            >
              <el-option
                v-for="item in resources_dict"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </td>
        </tr>
        <tr>
          <td class="column firstTd title_td">
            <span class="required">*</span>拜访目的
          </td>
          <td class="column textarea-box">
            <el-form-item prop="reasons_for_recommendation">
              <el-input
                v-model.trim="visitForm.reasons_for_recommendation"
                type="textarea"
                rows="4"
                placeholder="请输入内容" size="mini"
              />
            </el-form-item>
          </td>
          <td class="column firstTd title_td">
            <span class="required">*</span>达成成果
          </td>
          <td class="column textarea-box">
            <el-form-item prop="achievements">
              <el-input
                v-model.trim="visitForm.achievements"
                type="textarea"
                rows="4"
                placeholder="请输入内容"
              />
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd title_td">
            照片
          </td>
          <td colspan="3" style="padding: 10px;line-height: 20px">
            <el-card shadow="always">
              <div v-show="!formDisabled" slot="header">
                <div style="text-align: left">
                  <el-upload
                    :action="upFileUrl"
                    :headers="uploadHeaders"
                    :on-success="uploadSuccess"
                    :before-upload="beforeAvatarUpload"
                    :on-error="error"
                    :show-file-list="false"
                    accept="image/*"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </div>
              </div>
              <div v-if="visitForm.url_list && visitForm.url_list.length"
                   class="flex align-center justify-start flex-wrap"
              >
                <el-card shadow="always" style="margin: 5px" v-for="(url,index) in visitForm.url_list" :key="url">
                  <el-image style="width: 160px;height: 160px" :src="url" fit="contain"
                            :preview-src-list="visitForm.url_list"
                  >
                  </el-image>
                  <div v-show="!formDisabled">
                    <el-button type="danger" size="mini" @click="visitForm.url_list.splice(index,1)">删除</el-button>
                  </div>
                </el-card>
              </div>
              <div v-else style="text-align: center;line-height: 20px">
                暂无图片
              </div>
            </el-card>
          </td>
        </tr>
      </table>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeVisitDialog">关闭</el-button>
        <el-button v-show="!formDisabled" size="mini" type="primary" @click="saveVisitRecord">保存</el-button>
      </span>
  </el-dialog>
</template>

<script>
import { getContactById } from '@/api/customer/customer'
import { list_all3rd_bycode } from '@/api/business/setting/dict'
import { upFileUrl } from '@/api/others'
import { getToken } from '@/utils/auth'
import { cloneDeep } from 'lodash'
import { formatDate } from '@/utils/util'

export default {
  name: 'AddCustomerFollowDialog',
  props: {
    followFormVisible: {
      type: Boolean,
      default: false
    },
    customerId: {
      type: Number,
      default: -1
    },
    formDisabled: {
      type: Boolean,
      default: false
    },
    canEdit: {
      type: Boolean,
      default: false
    },
    look: {
      type: Boolean,
      default: false
    },
    model: {
      type: Object,
      default() {
        return {}
      }
    },
    fillUserArr: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      contactSelectLoading: false,
      resources_dict: [], // 资源字典
      advances_dict: [], // 推进动作
      opposite_person_arr: [],
      visitForm: {
        id: null,
        follow_time: null,
        opposite_person: null,
        phone: null,
        achievements: null,
        reasons_for_recommendation: null,
        action_list: [],
        resource_list: [],
        url_list: []
      },
      visitFormRules: {
        follow_time: [{ required: true, message: '请选择时间', trigger: 'change' }],
        achievements: [{ required: true, message: '请输入达成成果', trigger: 'blur' }],
        opposite_person: [{ required: true, message: '请选择对接人', trigger: 'change' }],
        reasons_for_recommendation: [{ required: true, message: '请输入拜访目的', trigger: 'blur' }]
      },
      upFileUrl,
      uploadHeaders: {},
      loading: null,
      pickerOptions: {
        disabledDate(time) {
          return new Date(formatDate(time)) > new Date(formatDate(new Date()))
        }
      }
    }
  },
  created() {
    this.initResourcesDict()
    this.initAdvancesDict()
    if (getToken()) {
      this.uploadHeaders['Authorization'] = getToken()
    }
  },
  watch: {
    model(val) {
      this.visitForm = cloneDeep(val)
      this.visitForm.id = this.customerId
    }
  },
  methods: {
    closeVisitDialog() {
      this.visitForm.id = null
      this.visitForm = {
        id: null,
        follow_time: null,
        opposite_person: null,
        phone: null,
        achievements: null,
        reasons_for_recommendation: null,
        action_list: [],
        resource_list: [],
        url_list: []
      }
      this.$nextTick(() => {
        this.$refs.followForm.clearValidate()
      })
      this.$emit('close')
    },
    saveVisitRecord() {
      this.$refs.followForm.validate(flag => {
        if (flag) {
          // if (this.visitForm.url_list && this.visitForm.url_list.length) {
          //   this.$emit('save', this.visitForm)
          // } else {
          //   this.$message.error('至少上传一张图片')
          // }
          this.$emit('save', this.visitForm)
        }
      })
    },
    getContact(id) {
      this.contactSelectLoading = true
      getContactById({ id }).then(res => {
        this.contactSelectLoading = false
        this.opposite_person_arr = res.data
        console.log(this.fillUserArr)
        this.fillUserArr.forEach(user => {
          if (this.opposite_person_arr.find(tmp => tmp === user.name) === undefined) {
            this.opposite_person_arr.push(user.name)
          }
        })
      })
    },
    // 初始化推进动作字典
    initAdvancesDict() {
      list_all3rd_bycode({ code: 'khxg-tjdz' }).then(
        res => {
          this.advances_dict = res.data.map(
            item => (
              {
                id: item.id,
                name: item.name
              }
            )
          )
        }
      )
    },
    // 初始化推荐资源字典
    initResourcesDict() {
      list_all3rd_bycode({ code: 'khxg-tjzy' }).then(
        res => {
          this.resources_dict = res.data.map(
            item => (
              {
                id: item.id,
                name: item.name
              }
            )
          )
        }
      )
    },
    init() {
      this.visitForm.id = this.customerId
      this.getContact(this.customerId)
    },
    uploadSuccess(response) {
      this.visitForm.url_list.push(response.data)
      if (this.loading) {
        this.loading.close()
      }
    },
    beforeAvatarUpload() {
      this.loading = this.$loading({
        lock: true,
        text: '上传中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    error() {
      if (this.loading) {
        this.loading.close()
      }
      this.$message.error('上传出错，请重试')
    }
  }
}
</script>

<style scoped>

.mailTable {
  width: 90%;
  font-size: 14px;
  margin: 0 auto 10px auto;
  border-collapse: collapse;
}

.mailTable tr td {
  height: 60px;
  line-height: 60px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
  text-align: center;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  text-align: center;
  /*border: 1px solid #8c939d;*/
}

.required {
  color: red;
}

/deep/ .mailTable .el-form-item {
  margin-bottom: 0;
}

/deep/ .mailTable .el-form-item__content {
  line-height: 0;
}

.title_td {
  background: #F5F7FA;
  font-weight: bold;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: white;
  color: black;
}

/deep/ .el-input.is-disabled .el-input__inner {
  background-color: white;
  color: black;
}
</style>
